<div class="tooltipPosition">
  <div class="positionTop">
    <button lv-tooltip="prompt text" lvTooltipPosition="topLeft" lv-button>TopLeft</button>
    <button lv-tooltip="prompt text" lvTooltipPosition="top" lv-button>Top</button>
    <button lv-tooltip="prompt text" lvTooltipPosition="topRight" lv-button>TopRight</button>
  </div>

  <div class="positionRight">
    <button [lv-tooltip]="tooltipTpl" lvTooltipPosition="rightTop" lv-button>RightTop</button>
    <button [lv-tooltip]="tooltipTpl" lvTooltipPosition="right" lv-button>Right</button>
    <button [lv-tooltip]="tooltipTpl" lvTooltipPosition="rightBottom" lv-button>RightBottom</button>
  </div>

  <div class="positionBottom">
    <button lv-tooltip="prompt text" lvTooltipPosition="bottomLeft" lv-button>BottomLeft</button>
    <button lv-tooltip="prompt text" lvTooltipPosition="bottom" lv-button>Bottom</button>
    <button lv-tooltip="prompt text" lvTooltipPosition="bottomRight" lv-button>BottomRight</button>
  </div>

  <div class="positionLeft">
    <button [lv-tooltip]="tooltipTpl" lvTooltipPosition="leftTop" lv-button>LeftTop</button>
    <button [lv-tooltip]="tooltipTpl" lvTooltipPosition="left" lv-button>Left</button>
    <button [lv-tooltip]="tooltipTpl" lvTooltipPosition="leftBottom" lv-button>LeftBottom</button>
  </div>
</div>

<ng-template #tooltipTpl>
  <div>
    <p>prompt text</p>
    <p>prompt text</p>
    <p>prompt text</p>
  </div>
</ng-template>
